import React, { Component } from 'react';
import { Card, Form, Input, InputNumber, Button, Select, message } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { reqUpDownProduction } from '../../api';
// 产品的添加和更新组件
class ProductUpdate extends Component {
    constructor(props) {
        super();
        this.state = {
            oldId:'',
            card: {
                title: (
                    <span onClick={this.gouback} className='card-tit'>
                        <ArrowLeftOutlined /><span style={{ marginLeft: 10 }}>返回上级</span>
                    </span>
                )
            },
            production: {

            },
        }
    }
    onFinish = async (values) => {
        try {
            let res = await reqUpDownProduction(this.state.oldId,values)
            if (res.data.length != 0) {
                message.success('修改成功')
            }
        } catch (error) {
                message.error('修改失败');
                console.log(error);
        }
    }
    gouback = () => {
        this.props.history.goBack()
    }
    // 双向绑定
    doubleBindState = (val) => {
        this.setState({
            production:{
                ...this.state.production,
                'state':val
            }
        })
    }
    doubleBindType = (val) => {
        this.setState({
            production:{
                ...this.state.production,
                'typeid':val
            }
        })
    }
    doubleBind = (ev) => {
        this.setState({
            production:{
                ...this.state.production,
                [ev.target.name]:ev.target.value
            }
        })
    }
    UNSAFE_componentWillMount = () => {
        this.setState({
            oldId:this.props.location.state.id,
            production: this.props.location.state
        })
    }
    render() {
        const layout = {
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 13,
            },
        };
        const validateMessages = {
            required: '${label}不能为空!',
            types: {
                number: '${label}只能是数字',
            },
        };
        let { production } = this.state;
        return (
            <>
                <Card title={this.state.card.title}>
                    <Form {...layout} name="nest-messages" onFinish={this.onFinish} validateMessages={validateMessages}>
                        <Form.Item
                            name={['id']}
                            label="编号"
                            
                        >
                            <Input name='id' defaultValue={production.id} onChange={this.doubleBind} />
                        </Form.Item>
                        <Form.Item
                            name={['price']}
                            label="价格"
                        >
                            <Input name='price' defaultValue={production.price} onChange={this.doubleBind} addonAfter='万元起' />
                        </Form.Item>
                        <Form.Item
                            name={['typeid']}
                            label="类别"
                            
                        >
                            <Select name='typeid' defaultValue={production.typeid} onChange={this.doubleBindType}>
                                <Select.Option value="001">新能源</Select.Option>
                                <Select.Option value="002">轿车</Select.Option>
                                <Select.Option value="003">SUV</Select.Option>
                                <Select.Option value="004">MPV</Select.Option>
                                <Select.Option value="005">卡车</Select.Option>
                                <Select.Option value="006">皮卡</Select.Option>
                                <Select.Option value="007">微面</Select.Option>
                                <Select.Option value="008">微卡</Select.Option>
                                <Select.Option value="009">轻客</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name={['state']}
                            label="状态"
                            
                        >
                            <Select name='state' defaultValue={production.state + ''} onChange={this.doubleBindState}>
                                <Select.Option value="0">已下架</Select.Option>
                                <Select.Option value="1">在售</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            name={['name']}
                             label="名称">
                            <Input name='name' defaultValue={production.name} onChange={this.doubleBind} />
                        </Form.Item>
                        <Form.Item name={['info']} label="描述信息">
                            <Input.TextArea name='info' defaultValue={production.info} onChange={this.doubleBind} />
                        </Form.Item>
                        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                            <Button type="primary" htmlType="submit">
                                保存修改
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </>
        );
    }
}

export default ProductUpdate;